<template>
  <div class="input-dom">
    <input type="text" :value="first" @input="$emit('update:first', $event.target?.value)" />
    <a-input :value="second" @input="emitValue" />
    <!-- <input type="text" v-model="value" /> -->
  </div>
</template>

<script setup lang="ts">
  // import { computed } from 'vue'
  // const props = defineProps<{ first: string; second: string }>()
  const props = defineProps({ first: String, second: String, secondModifiers: { default: () => ({}) } })
  const emit = defineEmits(['update:first', 'update:second'])

  const emitValue = (e: Event) => {
    let value = e.target?.value
    if (props.secondModifiers) {
      value = `${value}-`
    }
    console.log('%c [  ]-16', 'font-size:13px; background:#3b84e0; color:#7fc8ff;', props.secondModifiers)
    emit('update:second', value)
  }

  // const props = defineProps(['modelValue'])
  // const emit = defineEmits(['update: modelValue'])
  // const value = computed({
  //   get() {
  //     return props.modelValue
  //   },
  //   set(value) {
  //     emit('update: modelValue', value)
  //   }
  // })
</script>

<style lang="less" scoped></style>
